<div class="singer-detail wrap feature-wrap clearfix">
  <div class="dt-left">
    <div class="left-wrap">
      <div class="n-artist">
        <div class="names clearfix">
          <h2 class="ellipsis">{{singerInfo.artist?.name}}</h2>
          <h3 class="ellipsis">{{singerInfo.artist?.alias.join(';')}}</h3>
        </div>
        <div class="cover-img">
          <img class="full-height" appImgDefault [src]="singerInfo.artist?.picUrl" [alt]="singerInfo.artist?.name" />
        </div>
        <button class="btn btn-like" [class.btn-liked]="hasLiked" (click)="onLikeSinger(singerInfo.artist.id.toString())"></button>
      </div>
      <div class="top-50">
        <div class="btns clearfix">
          <nz-button-group class="btn">
            <button class="play" nz-button nzType="primary" (click)="onAddSongs(singerInfo.hotSongs, true)">
              <i nz-icon nzType="play-circle" nzTheme="outline"></i>播放
            </button>
            <button class="add" nz-button nzType="primary" (click)="onAddSongs(singerInfo.hotSongs)">+</button>
          </nz-button-group>
          <button class="btn like" nz-button (click)="onLikeSong(singerInfo.hotSongs)">
            <span>收藏</span>{{singerInfo.hotSongs.length}}
          </button>
        </div>
        <!-- 列表 -->
        <nz-table
          class="wy-table"
          #basicTable
          [nzData]="singerInfo.hotSongs"
          [nzFrontPagination]="false"
          nzBordered
          nzNoResult="没有音乐列表数据！">
          <thead>
          <tr>
            <th nzWidth="80px"></th>
            <th>标题</th>
            <th nzWidth="120px">时长</th>
            <th>专辑</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of basicTable.data; index as i;">
            <td class="first-col">
              <span>{{i + 1}}</span>
              <i class="ico play-song" title="播放" [class.current]="currentIndex === i" (click)="onAddSong(item, true)"></i>
            </td>
            <td class="song-name">
              <a [routerLink]="['/songInfo', item.id]">{{item.name}}</a>
            </td>
            <td class="time-col">
              <span>{{item.dt / 1000 | formatTime}}</span>
              <p class="icons">
                <i class="ico add" title="添加" (click)="onAddSong(item)"></i>
                <i class="ico like" title="收藏" (click)="onLikeSong(item)"></i>
                <i class="ico share" title="分享" (click)="onShareSong(item)"></i>
              </p>
            </td>
            <td>{{item.al.name}}</td>
          </tr>
          </tbody>
        </nz-table>
      </div>
    </div>
  </div>
  <div class="dt-right">
    <div class="right-wrap">
      <h3>相似歌手</h3>
      <ul class="clearfix">
        <li *ngFor="let item of similarSingers" [routerLink]="['/singer', item.id]">
          <div class="pic">
            <img appImgDefault [src]="item.picUrl" [alt]="item.name">
          </div>
          <p class="ellipsis">{{item.name}}</p>
        </li>
      </ul>
    </div>
  </div>
</div>
